<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import TabPreview from '@renderer/components/views/components/TabPreview.vue'
import TabMpr from '@renderer/components/views/components/TabMpr.vue'
import Tabd3 from '@renderer/components/views/components/Tabd3.vue'

const props = defineProps(['seriesId'])
const activeViewTypeRef = ref('preview')
const viewListRef = ref([
  {
    name: 'preview',
    component: shallowRef(TabPreview)
  },
  {
    name: 'mpr',
    component: shallowRef(TabMpr)
  },
  {
    name: '3d',
    component: shallowRef(Tabd3)
  }
])
const handleClick = () => {}
</script>

<template>
  <el-tabs v-model="activeViewTypeRef"
           class="views-tabs"
           @tab-click="handleClick">
    <el-tab-pane v-for="view in viewListRef"
                 :label="view.name"
                 lazy
                 :name="view.name">
      <div class="w-full h-[550px]">
        <component :is="view.component" :seriesId="props.seriesId"></component>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<style>
.views-tabs .el-tabs__header {
  margin-bottom: 0 !important;
}
</style>
